<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>

<html>
<head>
    <meta content="no-cache" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="Pragma"/>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Goodwill - Ошибка</title>
    <link rel="stylesheet" href="resources/css/main.css"/>
    <link rel="stylesheet" href="resources/css/stylesheet.css"/>
    <style type="text/css">
        .e1 {
            font-weight: bold;
            font-size: 16px;
            color: red;
        }

        .e2 {
            font-weight: normal;
            font-size: 12px;
            color: black;
        }

        .e3 {

        }

        .e4 {

        }

        .e_name_pane {
            text-align:left;
            margin-top:4px;
            padding: 5px;
            border: 1px solid black;
            background-color: whitesmoke;
            color: black;
            font-size: 120%;
        }

        .e_stacktrace_pane {
            text-align:left;
            margin-top:4px;
            padding: 5px;
            border: 1px solid black;
            background-color: beige;
            color: black;
        }

        .i_pane {
            width:800px;
            border:px solid black;
            text-align:left;
            padding:10px;
            margin:10px;
        }

        .e_pane {
            padding:10px;
            margin:10px;
            margin-top:50px;
        }
    </style>
    <script type="text/javascript">
        function toggleInfo()
        {
            try
            {
//                alert(document.getElementById('p1').style.display);
                if (document.getElementById('p1').style.display == 'none')
                {
                    document.getElementById('p1').style.display = 'block';
                }
                else
                {
                    document.getElementById('p1').style.display = 'none';
                }
            }
            catch (e)
            {
                alert (e);
            }
        }
    </script>
</head>
<body>

<f:view>
    <h:form>
        <center>
            <h:panelGroup styleClass="i_pane" layout="block">
                <h:panelGrid columns="2" cellpadding="5" cellspacing="5">
                    <h:graphicImage value="/resources/img/close_32x32.png"/>
                    <h:panelGroup>
                        <h:outputText value="Ой!" styleClass="e1"/><br>
                        <h:outputText value="К сожалению, ошибка, которая не должна была произойти все же произошла. Мы уже работаем над этим." styleClass="e2"/><br>
                        <h:outputText value="Вы можете перейти на "/>
                        <a href="ClientGoodsPage.jsf">главную</a>
                        <h:outputText value=" страницу."/>
                    </h:panelGroup>
                </h:panelGrid>
            </h:panelGroup>

            <p class="b" style="text-decoration:underline;cursor:pointer;color:blue;" onclick="toggleInfo();">Техническая информация об ошибке</p>
            <div class="e_pane" id="p1" style="display:none">
                <h:panelGroup styleClass="e_name_pane" layout="block">
                    <h:outputText value="#{ErrorBean.exceptionName} " styleClass="e3" escape="false"/>
                    <h:outputText value="#{ErrorBean.line}" escape="false"/>
                </h:panelGroup>
                <h:panelGroup styleClass="e_stacktrace_pane" layout="block">
                    <h:outputText value="#{ErrorBean.stackTrace}" styleClass="e4" escape="false"/>
                </h:panelGroup>
            </div>
        </center>
    </h:form>
</f:view>
</body>
</html>